<template>
	<div class="content-right">
		<div v-if="isInfo" class="remindLogin">
			<p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
			<a href="javascript:;" @click="isShow">用户登录</a>
		</div>
		<div v-else class="infoLogin">
			<div class="info-top">
				<a class="infoImg" href="javascript:;">
					<img :src="infoData.avatarUrl" alt="" />
				</a>
				<div class="infoList">
					<h4>
						<a href="javascript:;">{{ infoData.nickname }}</a>
					</h4>
					<p>
						<a href="javascript:;">{{ infoLevel }}<i></i></a>
					</p>
					<div class="btn">
						<a href="javascript:;"><i>签 到</i></a>
					</div>
				</div>
			</div>
			<ul class="info-bottom">
				<li>
					<a href="javascript:;">
						<strong>{{ infoData.authority }}</strong>
						<span>动态</span>
					</a>
				</li>
				<li class="vertical-split"></li>
				<li>
					<a href="javascript:;">
						<strong>{{ infoData.follows }}</strong>
						<span>关注</span>
					</a>
				</li>
				<li class="vertical-split"></li>
				<li>
					<a href="javascript:;">
						<strong>{{ infoData.followeds }}</strong>
						<span>粉丝</span>
					</a>
				</li>
			</ul>
		</div>
		<div class="singer">
			<h3><span>入驻歌手</span><a href="javascript:;">查看全部 ></a></h3>
			<ul>
				<li>
					<a href="javascript:;">
						<img src="@/image/download.png" alt="" />
						<div class="ifo">
							<h4>张惠妹aMEI</h4>
							<p>台湾歌手张惠妹</p>
						</div>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="@/image/download.png" alt="" />
						<div class="ifo">
							<h4>张惠妹aMEI</h4>
							<p>台湾歌手张惠妹</p>
						</div>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="@/image/download.png" alt="" />
						<div class="ifo">
							<h4>张惠妹aMEI</h4>
							<p>台湾歌手张惠妹</p>
						</div>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="@/image/download.png" alt="" />
						<div class="ifo">
							<h4>张惠妹aMEI</h4>
							<p>台湾歌手张惠妹</p>
						</div>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="@/image/download.png" alt="" />
						<div class="ifo">
							<h4>张惠妹aMEI</h4>
							<p>台湾歌手张惠妹</p>
						</div>
					</a>
				</li>
			</ul>
			<div>
				<a href="javascript:;"><i>申请成为网易音乐人</i></a>
			</div>
		</div>
		<div class="host">
			<h3><span>热门主播</span></h3>
			<ul>
				<li>
					<a href="javascript:;">
						<img src="@/image/1407374893913311.jpg" alt="" />
					</a>
					<div>
						<p><a href="javascript:;">陈立</a></p>
						<p>心理学家、美食家陈立教授</p>
					</div>
				</li>
				<li>
					<a href="javascript:;">
						<img src="@/image/1407374893913311.jpg" alt="" />
					</a>
					<div>
						<p><a href="javascript:;">陈立</a></p>
						<p>心理学家、美食家陈立教授</p>
					</div>
				</li>
				<li>
					<a href="javascript:;">
						<img src="@/image/1407374893913311.jpg" alt="" />
					</a>
					<div>
						<p><a href="javascript:;">陈立</a></p>
						<p>心理学家、美食家陈立教授</p>
					</div>
				</li>
				<li>
					<a href="javascript:;">
						<img src="@/image/1407374893913311.jpg" alt="" />
					</a>
					<div>
						<p><a href="javascript:;">陈立</a></p>
						<p>心理学家、美食家陈立教授</p>
					</div>
				</li>
				<li>
					<a href="javascript:;">
						<img src="@/image/1407374893913311.jpg" alt="" />
					</a>
					<div>
						<p><a href="javascript:;">陈立</a></p>
						<p>心理学家、美食家陈立教授</p>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<LoginView v-if="isLogin"></LoginView>
</template>

<script>
export default {
	name: "RecommendedRight",
};
</script>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useStore } from "vuex";
import { userDetail } from "@/api/Login";

const store = useStore();

const isInfo = ref(true);
const infoData = ref({});
const infoLevel = ref("");

const isLogin = computed(() => store.state.app.isLogin);
const loginId = computed(() => store.state.app.user.id);

onMounted(async () => {
	if (!loginId.value) return;
	isInfo.value = false;
	await getUser(loginId.value);
});

const isShow = () => {
	store.dispatch("app/isloginshow", true);
};

const getUser = async (id) => {
	const data = await userDetail(id);
	infoLevel.value = data.level;
	infoData.value = data.profile;
};
</script>

<style lang="less" scoped>
a:hover {
	text-decoration: underline;
}
.content-right {
	position: relative;
	width: 250px;
	box-sizing: border-box;
	border-left: 1px solid #d3d3d3;
	.remindLogin {
		height: 126px;
		padding-top: 0;
		background: url(@/image/index.png) no-repeat 0 0;
		p {
			width: 205px;
			margin: 0 auto;
			padding: 16px 0;
			line-height: 22px;
		}
		a {
			display: block;
			width: 100px;
			height: 31px;
			margin: 0 auto;
			line-height: 31px;
			text-align: center;
			color: #fff;
			text-shadow: 0 1px 0 #8a060b;
			background: url(@/image/index.png) no-repeat 0 -195px;
		}
	}
	.infoLogin {
		height: 165px;
		padding-top: 20px;
		background: url(@/image/index.png) no-repeat 0 -270px;
		.info-top {
			overflow: hidden;
			.infoImg {
				float: left;
				width: 80px;
				height: 80px;
				margin-left: 20px;
				padding: 2px;
				background: #fff;
				border: 1px solid #dadada;
				img {
					display: block;
					width: 80px;
					height: 80px;
				}
			}
			.infoList {
				float: left;
				width: 115px;
				margin-left: 18px;
				padding-top: 3px;
				h4 {
					width: auto;
					max-width: 100%;
					vertical-align: middle;
					overflow: hidden;
				}
				p {
					width: 100%;
					margin-top: 5px;
					a {
						display: inline-block;
						height: 17px;
						overflow: hidden;
						padding-left: 25px;
						line-height: 18px;
						color: #999;
						font-weight: bold;
						font-style: italic;
						background: url(@/image/icon2.png) no-repeat -130px -64px;
						i {
							float: right;
							width: 8px;
							height: 17px;
							display: inline-block;
							overflow: hidden;
							vertical-align: middle;
							background: url(@/image/icon2.png) no-repeat -192px -64px;
						}
					}
				}
				.btn {
					position: relative;
					margin-top: 15px;
					a,
					a > i {
						display: inline-block;
						height: 31px;
						line-height: 31px;
						overflow: hidden;
						vertical-align: top;
						text-align: center;
						cursor: pointer;
						padding: 0 5px 0 0;
						white-space: nowrap;
						text-decoration: none;
						color: #fff;
						background: url(@/image/button2.png) no-repeat right -428px;
					}
					a {
						i {
							width: 60px;
							padding: 0 15px 0 20px;
							pointer-events: none;
							background-position: 0 -387px;
						}
					}
				}
			}
		}
		.info-bottom {
			position: relative;
			display: flex;
			justify-content: space-between;
			margin-top: 22px;
			padding: 0 25px;
			li {
				height: 40px;
				a {
					display: block;
					color: #666;
					strong {
						display: block;
						font-size: 20px;
						font-weight: normal;
						white-space: nowrap;
					}
					span {
						margin-left: 2px;
						cursor: pointer;
					}
				}
				a:hover {
					text-decoration: none;
					color: #0c73c2;
				}
			}
			.vertical-split {
				height: 40px;
				background-color: #e4e4e4;
				width: 1px;
			}
		}
	}
	.singer {
		margin-top: 15px;
		& > h3 {
			height: 23px;
			margin: 0 20px;
			border-bottom: 1px solid #ccc;
			color: #333;
			font-size: 12px;
			overflow: hidden;
			span {
				float: left;
			}
			a {
				float: right;
			}
		}
		& > ul {
			margin: 6px 0 14px 20px;
			overflow: hidden;
			li {
				float: left;
				width: 210px;
				height: 62px;
				margin-top: 14px;
				background: #fafafa;
				a {
					display: flex;
					img {
						width: 62px;
						height: 62px;
					}
					.ifo {
						width: 133px;
						height: 60px;
						padding-left: 14px;
						border: 1px solid #e9e9e9;
						cursor: pointer;
						border-left: none;
						h4 {
							margin-top: 8px;
							font-size: 100%;
						}
						p {
							width: 90%;
							margin-top: 8px;
							color: #666;
						}
					}
				}
			}
		}
		& > div {
			a {
				display: inline-block;
				margin-left: 20px;
				border-radius: 4px;
				padding: 0 5px 0 0;
				color: #333;
				font-weight: bold;
				background: url(@/image/button2.png) no-repeat 0 9999px;
				background-position: right -100px;
				i {
					display: inline-block;
					width: 170px;
					height: 31px;
					padding: 0 15px 0 20px;
					text-align: center;
					line-height: 31px;
					background: url(@/image/button2.png) no-repeat 0 9999px;
					background-position: 0 -59px;
				}
			}
			a:hover {
				color: #333;
				background-position: right -182px;
				i {
					color: #333;
					background-position: 0 -141px;
				}
			}
		}
	}
	.host {
		margin-top: 30px;
		& > h3 {
			height: 23px;
			margin: 0 20px;
			border-bottom: 1px solid #ccc;
			color: #333;
			font-size: 12px;
			overflow: hidden;
			span {
				float: left;
			}
		}
		& > ul {
			margin: 20px 0 0 20px;
			overflow: hidden;
			li {
				float: left;
				width: 210px;
				height: 50px;
				a {
					float: left;
					width: 40px;
					margin-right: 10px;
					img {
						width: 40px;
						height: 40px;
						box-shadow: 0 0 1px #333333 inset;
					}
				}
				& > div {
					float: left;
					width: 160px;
					line-height: 21px;
					p {
						overflow: hidden;
						a {
							display: inline-block;
							zoom: 1;
							max-width: 88%;
							vertical-align: middle;
							color: #000;
						}
					}
				}
			}
		}
	}
}
</style>
